{extend name='public/base' /}

{block name="css"}
<link rel="stylesheet" href="/res/editormd/css/editormd.min.css">
<link rel="stylesheet" href="/res/layui/css/inputTag.css?v=512">
{/block}

{block name="content"}

<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章ID/标题</label>
                <div class="layui-input-inline">
                    <input type="text" name="so" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">文章标签</label>
                <div class="layui-input-inline">
                    <select name="classiyf_id">
                        <option value="">请选择标签</option>
                        {foreach $data['data'] as $key=>$v }
                        <option value="{$v['id']}">{$v['name']}</option>
                        {/foreach}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="table-search">
                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
            </div>
        </div>
    </div>

    <div class="layui-card-body">
        <table class="layui-hide" id="table" lay-filter="test"></table>
    </div>
</div>


<form class="layui-form" id="form" action="" style="display: none" lay-filter="form">
    <div style="margin-top: 50px;"></div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章分类</label>
        <div class="layui-inline">
            <select name="classify_id" lay-verify="required" lay-reqText="请选择所属分类">
                <option value="">请选择分类</option>
                {foreach $data['data'] as $key=>$v }
                <option value="{$v['id']}">{$v['name']}</option>
                {/foreach}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block layui-imput-l">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-block fairy-tag-container" style="min-height: 40px;">
            <input type="text" class="fairy-tag-input tag2" name="keywords" placeholder="输入后按回车键生产标签"
                   autocomplete="off" style="width: 150px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="radio" name="status" value="1" title="显示">
            <input type="radio" name="status" value="0" title="隐藏" checked="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="" id="test-editormd">
            <textarea id="content" name="content" style="display:none;"></textarea>
        </div>
    </div>
</form>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添 加</button>
        <button class="layui-btn layui-btn-sm" lay-event="allDel">删 除</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>删除
    </a>
</script>

<script type="text/html" id="buttonTpl">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-xs">待审核</button>
    {{#  } elseif (d.status == 1) { }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">已通过</button>
    {{# } elseif (d.status == 2){ }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">已拒绝</button>
    {{# } else{ }}
    <button class="layui-btn layui-btn-primary layui-btn-xs">未知状态</button>
    {{#  } }}
</script>

<script type="text/html" id="imgTpl">
    <img style="display: inline-block; width: 50%; height: 100%;" src={{ d.img }}>
</script>
{/block}

{block name="js"}
<script src="/res/editormd/js/jquery-3.6.4.min.js"></script>
<script src="{:getVersionNumber('/res/editormd/js/editormd.js')}"></script>
<script src="/res/editormd/lib/marked.min.js"></script>
<script src="/res/editormd/lib/prettify.min.js"></script>
<script src="/res/editormd/lib/raphael.min.js"></script>
<script src="/res/editormd/lib/underscore.min.js"></script>
<script src="/res/editormd/lib/sequence-diagram.min.js"></script>
<script src="/res/editormd/lib/flowchart.min.js"></script>
<script src="/res/editormd/lib/jquery.flowchart.min.js"></script>
<script src="/res/editormd/lib/codemirror/codemirror.min.js"></script>
<script>
    layui.use(['inputTag', 'jquery', 'table', 'form'], function () {
        let $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            inputTag = layui.inputTag,
            TableData = table.render({
                id: 'testReload',
                elem: '#table',
                toolbar: '#toolbarDemo',
                page: true,
                method: 'post',
                limit: 15,
                limits: [15, 50, 200, 600, 1000, 1800, 3000],
                url: '/manage/projects/content/article/list',
                title: '用户数据表',
                cols: [
                    [ //表头
                        {field: 'id', type: 'checkbox', align: 'center'}
                        , {field: 'id', title: 'ID', align: 'center'}
                        , {field: 'title', title: '标题', align: 'center'}
                        // , {field: 'img', title: '封面', align: 'center', toolbar: '#imgTpl'}
                        // , {field: 'username', title: '用户名', align: 'center'}
                        // , {field: 'status', title: '状态', align: 'center', toolbar: '#buttonTpl'}
                        // , {field: 'describe', title: '描述', align: 'center'}
                        , {field: 'readCount', title: '浏览量', align: 'center'}
                        , {field: 'createTime', title: '创建时间', align: 'center'}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                    ]
                ]
            }),
            //定义
            tagObj1 = inputTag.render({
                elem: '.tag2',
                removeKeyNum: 8,//删除按键编号 默认，BackSpace 键
                createKeyNum: 13,//创建按键编号 默认，Enter 键
            });

        //监听搜索
        form.on('submit(table-search)', function (data) {
            let field = data.field;

            //执行重载
            table.reload('testReload', {
                where: field
            });
        });

        //工具栏事件
        table.on('toolbar(test)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':  //添加
                    addData();
                    break;
                case 'allDel':  //删除
                    let data = checkStatus.data;
                    deleteData(data);
                    break;
            }
        });
        //监听工具条
        table.on('tool(test)', function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case 'edit':
                    editData(data);
                    break;
                case 'delete':
                    deleteData([data]);
                    break;
            }
        });

        function addData() {
            $("#form")[0].reset();
            //md初始化
            let testEditor = editormd("test-editormd", {
                width: "90%",
                height: 500,
                toc: true,
                todoList: true,
                placeholder: '请输入内容',
                path: '/res/editormd/lib/'
            });
            layer.open({
                type: 1,
                title: '添加文章',
                content: $('#form'),
                area: ['80%', '800px'],
                btn: ['确定', '取消'],
                btn1: function (index, layero) {
                    let data = form.val('form');
                    data['keywords'] = tagObj1.getData();
                    data['content'] = testEditor.getMarkdown();
                    data['content_html'] = testEditor.getPreviewedHTML();
                    $.ajax({
                        type: 'post',
                        url: "/manage/projects/content/article/add",
                        data: data,
                        success: function (res) {
                            if (res.code === 0) {
                                layer.close(index);
                                layer.msg('添加成功');
                                table.reload('testReload');
                            } else {
                                layer.msg(res.message);
                                return false;
                            }
                        }
                    });
                },
                end: function () {
                    $('#form').hide();
                },
            });
        }

        function editData(arr) {
            $.ajax({
                type: 'post',
                url: '/manage/projects/content/article/info',
                data: {id: arr.id},
                success: function (res) {
                    if (res.code === 0) {
                        //md初始化
                        let testEditor = editormd("test-editormd", {
                            width: "90%",
                            height: 500,
                            toc: true,
                            //atLink    : false,    // disable @link
                            //emailLink : false,    // disable email address auto link
                            todoList: true,
                            placeholder: '请输入内容',
                            path: '/backstage/editormd/lib/'
                        });
                        tagObj1 = inputTag.render({
                            elem: '.tag2',
                            data: res.data.keywords,
                        });
                        $('#content').text(res.data.content);
                        form.val('form', {
                            "classify_id": res.data.classifyId, // "name": "value"
                            "title": res.data.title,
                        });
                        layer.open({
                            type: 1,
                            title: '修改文章',
                            content: $('#form'),
                            area: ['80%', '800px'],
                            btn: ['修改', '取消'],
                            btn1: function (index, layero) {
                                let data = form.val('form');
                                data['id'] = arr.id;
                                data['keywords'] = tagObj1.getData();
                                data['content'] = testEditor.getMarkdown();
                                data['content_html'] = testEditor.getPreviewedHTML();
                                $.ajax({
                                    type: 'post',
                                    url: "/manage/projects/content/article/update",
                                    data: data,
                                    success: function (res) {
                                        if (res.code === 0) {
                                            layer.close(index);
                                            layer.msg('修改成功');
                                            table.reload('testReload');
                                        } else {
                                            layer.msg(res.message);
                                            return false;
                                        }
                                    }
                                });
                            },
                            end: function () {
                                $('#form').hide();
                            },
                        });
                    } else {
                        layer.msg(res.message);
                    }
                }
            });
        }

        function deleteData(arr) {
            if (arr.length <= 0) {
                layer.msg('请选择要删除的数据');
                return false;
            }
            layer.confirm('确定删除这些数据吗？', function (index) {
                $.post('/manage/projects/content/article/delete',
                    {data: arr},
                    function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功')
                            table.reload('testReload');
                        } else {
                            layer.msg(res.message);
                        }
                    }
                );
            })
        }
    });
</script>
{/block}